<template>
    <a-modal
        class="chart-form"
        title="设置过滤条件"
        @ok="handleOk"
        :visible.sync="visible"
        width="350px"
        @cancel="close"
        :keyboard="false"
        :maskClosable="false"
        ok-text="确认"
        cancel-text="取消"
    >
      <div class="chart-filter-dialog">
        <div class="filter-title">
          <span class="title">{{field}}</span>
          <a-select v-model="formData.filterType" style="width: 120px">
            <template v-if="dataType === DataType.TEXT" >
              <a-select-option v-for="item in textOption" :key="item.value" :value="item.value" >
                {{item.alia}}
              </a-select-option>
            </template>
            <template v-if="dataType === DataType.NUMBER" >
              <a-select-option v-for="item in numberOption" :key="item.value" :value="item.value" >
                {{item.alia}}
              </a-select-option>
            </template>
            <template v-if="dataType === DataType.DATE" >
              <a-select-option v-for="item in dateOption" :key="item.value" :value="item.value" >
                {{item.alia}}
              </a-select-option>
            </template>
          </a-select>
          <a-select v-model="formData.dateRange" style="width: 120px" v-if="dataType === DataType.DATE" >
            <a-select-option v-for="item in dateDetailOption" :key="item.value" :value="item.value" >
              {{item.alia}}
            </a-select-option>
          </a-select>
        </div>
        <div class="filter-content">
          <a-select mode="tags" v-model="formData.values" v-if="dataType !== DataType.DATE && dataType !== null" style="width: 100%">
          </a-select>
          <!-- <a-input-number v-model="value" :min="1"/> -->
        </div>
      </div>
    </a-modal>
</template>

<script>
import { DataType, FilterType, DateRange } from '@/filterConstant';
export default {
  props: {
    visible: Boolean,
    field: String,
    dataType: Number,
    values: Array,
    filterType: Number,
    dateRange: Number,
  },
  data() {
    return {
      DataType,
      formData: {
        values: [],
        filterType: 0,
        dateRange: DateRange.TODAY,
      },
      textOption: [
        { value: FilterType.INCLUDE, alia: '包含' },
        { value: FilterType.EQUAL, alia: '是' },
        { value: FilterType.BEGAIN, alia: '开头为' },
        { value: FilterType.END, alia: '结尾为' },
        { value: FilterType.EXCLUSIVE, alia: '不包含' },
        { value: FilterType.UNEQUAL, alia: '不是' }
      ],
      numberOption: [
        { value: FilterType.EQUAL, alia: '=' },
        { value: FilterType.UNEQUAL, alia: '≠' },
        { value: FilterType.GREATER, alia: '>' },
        { value: FilterType.GREATER_EQUAL, alia: '>=' },
        { value: FilterType.LESS, alia: '<' },
        { value: FilterType.LESS_EQUAL, alia: '<=' }
      ],
      dateOption: [
        { value: FilterType.DATE_YES, alia: '日期是' },
        { value: FilterType.DATE_NO, alia: '日期不是' }
      ],
      dateDetailOption: [
        { value: DateRange.TODAY, alia: '今天' },
        { value: DateRange.YESTERDAY, alia: '昨天' },
        { value: DateRange.TOMORROW, alia: '明天' },
        { value: DateRange.THIS_WEEK, alia: '本周' },
        { value: DateRange.LAST_WEEK, alia: '上周' },
        { value: DateRange.NEXT_WEEK, alia: '下周' },
        { value: DateRange.THIS_MONTH, alia: '本月' },
        { value: DateRange.LAST_MONTH, alia: '上月' },
        { value: DateRange.NEXT_MONTH, alia: '下月' },
        // { value: DateRange.PAST_SEVERAL_DAYS, alia: '过去...天' },
        // { value: DateRange.FEATURE_SEVERAL_DAYS, alia: '将来...天' }
      ],
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
    save() {
      this.$emit("save", this.formData);
    },
    handleOk() {
      if(this.formData.values.length === 0 && this.dataType !== DataType.DATE) {
        this.$message.warning('过滤条件设置不正确')
        return
      }
      this.save()
    }
  },
  mounted(){
    this.formData = {
      values: this.values,
      filterType: this.filterType,
      dateRange: this.dateRange,
    }
  }
};
</script>
<style lang="less">
.chart-filter-dialog{
  .filter-title{
    padding: 0 10px;
    .title{
      font-size: 16px;
      font-weight: bold;
    }

    .ant-select-selection{
      border: none; //清除select聚焦时候的边框颜色
      outline: none; //将select的宽高等于div的宽高
      margin-left: 5px;
      padding-left: 5px;
      color: rgb(127, 178, 255);
      border-color: #e0e0e0 !important;
      // color: black !important;
    }
  }

  .filter-content{
    padding: 0 10px;

    input{
      color: black !important;
    }
  }
}
</style>